<template>
  <div class="com-lunbo">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in imglist">
            <img  v-bind:src="item">
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default {
    name: "lunbo",
    data(){
      return{

      }
    },
    props:{
      imglist:{
        type:Array,
        required: true
      }
    },
    mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
            paginationClickable: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            effect: 'fade',
            loop: true,
            autoplay: 4000
        })
    }
  }
</script>
<style scoped>
  .com-lunbo{
    width: 100%;
    height: 660px;
    margin-top: 20px;
  }
  .swiper-container{
    width: 100%;
    height: 100%;
  }
  .swiper-container .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
  }
</style>